<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>通用配置</title>
  <script src="js/echarts.js"></script>
    <style>
        #box{
            width: 800px;
            height: 800px;
            margin: auto;
            background: #f5faf6;
        }
    </style>
</head>
<div id="box"></div>
<body>
<script>
 var my=echarts.init(document.querySelector("#box"))
 var xDataArr=["孙悟空","猪八戒","阎王","玉皇大帝","太上老君"]
 var yDataArr=[500,300,100,665,688]
  option= {
    title:{  //增加图表标题
    text:"各路大仙年龄"  //添加文字
    //一、文字样式
    ,textStyle:{  //1.指定文字样式
    color: "#e4393c"
    ,fontSize: 39
    ,fontStyle:'italic'
    }
     //二、文字边框
    ,borderWidth: 5
    ,borderColor: "#ff0"
    }
    ,xAxis: {
          type: "category",   //category类别
          data: xDataArr,

      },
      yAxis: {
          type: "value"  //设置为value不需要设置值，需要在series中设置
      },
      series:[
          {
              name:"年龄",
              type:"line",
              data: yDataArr
          }
      ]
  }
  //5.将type的值设置为line(折线图)
   my.setOption(option)
</script>
</body>
</html>